<template>
	<view class="st-content">
		<u-search shape="round" @search="search()" v-model="keyword"></u-search>
		<view class="zjc-rb">
			<uni-swiper-dot :info="scImages" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in scImages" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item.url" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="st-main">
			<view class="st-main-header">
				<text style="margin-left: 30rpx; font-size: 30rpx; font-weight: 700;">推荐</text>
			</view>
			<view class="st-main-stlist">
				<uni-card v-for="item in stList" :key="item.stId" @click="toStdetail(item.stId)">
								<image slot='cover' style="width: 100%; margin-top: 10rpx; border-radius: 10rpx;" :src="item.stCoverImage" @click="toStdetail(item.stId)" mode="widthFix"></image>
								<text class="uni-body">{{item.stTitle}}</text>
								<view slot="actions" class="card-actions st-card">
									<view class="card-actions-item">
										<uni-icons type="heart" size="18" color="#999"></uni-icons>
										<text class="card-actions-item-text" style="color: gray;">{{item.stZan}}</text>
									</view>
									<view class="card-actions-item">
										<uni-icons type="star" size="18" color="#999"></uni-icons>
										<text class="card-actions-item-text" style="color: gray;">{{item.stSc}}</text>
									</view>
								</view>
				</uni-card>
			</view>
			<u-loadmore style="margin-bottom: 24rpx;" :status="status" />
			<view style="height: 24rpx; width: 100%;">
				
			</view>
			<view class="add-st" @click="toAddSt()">
				<image src="../../static/st-add.png" mode="" style="width: 96rpx; height: 96rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				keyword:null,
				pageNo:1,
				pageSize:6,
				total:0,
				status:'loadmore',
				scImages: [{
						url:"../../static/rb1.jpg"
					}, 
					{
						url:'../../static/rb2.jpg'
					}, 
					{
						url:'../../static/rb3.jpg'
					}],
				stList:[
				]
			}
		},
		onLoad(){
			this.init()
		},
		
		onReachBottom(){
			if(this.pageNo*this.pageSize>=this.total){
				this.status = 'nomore'
			}else{
				this.status = 'loading'
				this.pageNo = this.pageNo+1
				this.init()
			}
		},
		methods: {
			like(id){
				
			},
			sc(id){
				
			},
			change(e){
				this.current = e.detail.current
			},
			toAddSt(){
				uni.navigateTo({
					url:"/pages/add-st/add-st"
				})
			},
			toStdetail(id){
				
				uni.navigateTo({
					url:"/pages/st-detail/st-detail?stid="+id
				})
			},
			init(){
				this.request({
					url:"/strategy/list",
					method:"GET",
					data:{
						keyword:this.keyword,
						pageNo:this.pageNo,
						pageSize:this.pageSize
					}
				}).then(res=>{
					if(res.code==='1'){
						console.log(res.data)
						this.stList  = [...this.stList,...res.data.records]
						this.total = res.data.total
					}else{
						uni.showToast({
							icon:'error,',
							title:res.msg
						})
					}
					
				}).catch(()=>{
					
					uni.showToast({
						icon:'error,',
						title:'服务异常'
					})
				})
				
			},
			search(){
				this.pageNo = 1
				this.init()
			}
		}
	}
</script>

<style scoped>
.st-content{
	background-color: #f1f1f1f1;
}
.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}
.st-main {
	position: absolute;
	top:450rpx;
	width:100%;
	height: 700rpx;
	background-color: #ffffff;
	border-radius: 30rpx;
}
.st-main-header {
	margin-top: 20rpx;
}
.st-card {
	display: flex;
	justify-content: space-around;
}
.st-card view {
	margin-bottom: 10rpx;
}
.st-footer {
	text-align: center;
	margin-bottom: 20rpx;
	width: 100%;
}
.st-footer p{
	font-size: 25rpx;
	color: gray;
	width: 100%;
	margin-bottom: 20rpx;
}
.add-st {
	position: fixed;
	bottom: 100rpx;
	right: 0rpx;
}

</style>
